<template>
	<view>
		<uv-picker ref="picker" :columns="addressList" :loading="loading" keyName="name" @change="change"
			@confirm="confirm">
		</uv-picker>
	</view>
</template>

<script>
	export default {
		name: "cu-address",
		props: {
			province: {
				type: String,
				default () {
					return '北京'
				}
			},
			city: {
				type: String,
				default () {
					return '北京市'
				}
			},
			area: {
				type: String,
				default () {
					return '朝阳区'
				}
			},
		},
		data() {
			return {
				loading: false,
				provinceList: [], //省
				cityList: [], //市
				areaList: [], //区
				pickerValue: [0, 0, 0],
				defaultValue: [3442, 1, 2]
			};
		},
		created() {
			this.getRegions();
		},
		computed: {
			addressList() {
				return [this.provinceList, this.cityList, this.areaList];
			}
		},
		methods: {
			// init() {

			// },
			getRegions() {
				uni.getStorage({
					key: '_regions',
					success: (res) => {
						this.defaultName2Value(res.data);
					},
					fail: () => {
						this.loadRegions()
					}
				});
			},
			loadRegions() {
				uni.$uv.http.get('/address/regions', ).then(res => {
					if (res.code === 200) {
						uni.setStorage({
							key: '_regions',
							data: res.data,
							success: () => {
								console.log('缓存regions成功');
							}
						});
						this.defaultName2Value(res.data);
						setTimeout(() => {
							this.loading = false
						}, 200)
					}

				}).catch(e => {
					console.log(e)
				})
			},
			defaultName2Value(data) {
				// this.provinceList = data.sort((left, right) => (Number(left.code) > Number(right.code) ? 1 : -1));
				this.provinceList = []
				// 查找省
				for (let i = 0; i < data.length; i++) {
					let item = data[i]
					item.id = Number(item.id)
					if (item.id > 0) {
						if (item.name === this.province) {
							this.defaultValue[0] = item.id
							this.cityList = item?.children || [];
						}
						this.provinceList.push(item)
					}
				}
				// 查找市
				for (let i = 0; i < this.cityList.length; i++) {
					let item = this.cityList[i]
					item.id = Number(item.id)
					if (item.name === this.city) {
						this.defaultValue[1] = item.id
						this.areaList = item?.children || [];
					}
					this.cityList[i] = item
				}
				// 查找区
				for (let i = 0; i < this.areaList.length; i++) {
					let item = this.areaList[i]
					item.id = Number(item.id)
					if (item.name === this.area) {
						this.defaultValue[2] = item.id
					}
					this.areaList[i] = item
				}
				// console.log(this.defaultValue)
			},
			handlePickValueDefault() {
				// 设置省
				this.pickerValue[0] = this.provinceList.findIndex(item => Number(item.id) === this.defaultValue[0]);
				// 设置市
				this.cityList = this.provinceList[this.pickerValue[0]]?.children || [];
				this.pickerValue[1] = this.cityList.findIndex(item => Number(item.id) === this.defaultValue[1]);
				// 设置区
				this.areaList = this.cityList[this.pickerValue[1]]?.children || [];
				this.pickerValue[2] = this.areaList.findIndex(item => Number(item.id) === this.defaultValue[2]);
				// 重置下位置
				this.$refs.picker.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]], true);
			},
			change(e) {
				if (this.loading) return;
				const {
					columnIndex,
					index,
					indexs
				} = e
				// 改变了省
				if (columnIndex === 0) {
					this.cityList = this.provinceList[index]?.children || []
					this.areaList = this.cityList[0]?.children || []
					this.$refs.picker.setIndexs([index, 0, 0], true)
				} else if (columnIndex === 1) {
					this.areaList = this.cityList[index]?.children || []
					this.$refs.picker.setIndexs(indexs, true)
				}
			},
			open() {
				this.$refs.picker.open();
				// console.log(this.pickerValue)
				this.handlePickValueDefault()
			},
			close() {
				this.$refs.picker.close();
			},
			confirm(e) {
				let data = {
					indexs: e.indexs,
					names: [e.value[0].name, e.value[1].name, e.value[2].name]
				}
				this.$emit('onConfirm', data);
				this.close();
				// console.log('确认选择的地区：', e);
				// uni.showToast({
				// 	icon: 'none',
				// 	title: `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`
				// })
			}
		}
	}
</script>

<style>

</style>